<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>评分组件 - 类式定义</title>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    //类式组件定义 -- 类名就是组件名
    class Rating extends React.Component { //自定义组件类必须继承React.Component
      render() { //定义reader方法(必须叫这个名字,本质上是重写了父类中的方法),定义组件内容
        //React.Component中提供props的属性,用于接收自定义组件中传入的属性
        let count = this.props.count

        //控制爱心的数量
        count = count ? count : 5;
        let star = ''
        for (let i = 0; i < count; i++) {
          star += '❤'
        }

        //控制爱心的颜色
        let styleObj = { color: this.props.color }

        //返回组件内容
        return <div style={styleObj}>{star}</div>
      }
    }

    //1.创建子组件
    let child =
      <div>
        <Rating></Rating>
        <Rating count='3'></Rating>
        <Rating color='red'></Rating>
        <Rating color='blue' count='10'></Rating>
      </div>
    //2.获取父组件
    let parent = ReactDOM.createRoot(app);
    //3.挂载子组件到父组件 
    parent.render(child)
  </script>
</body>

</html>